<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// // 取值写法
// const fullname = computed(() => {
//   return firstName.value + ' ' + lastName.value
// })

// 赋值写法
const fullname = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // 计算属性赋值如果实现了set,则不会出现警告
  // 同时可以通过value设置获取的值
  set(value) {
    firstName.value = value.split(' ')[0]
    lastName.value = value.split(' ')[1]
  },
})
</script>

<template>
  <div id="app">
    <h2>全名：{{ fullname }}</h2>

    <button @click="fullname = 'rose ly'">修改名字</button>
  </div>
</template>

<style></style>
